<template>
  <div>
    <Form :formData="data.formData" v-model="params" />
    <div class="fixed-bottom">
      <div class="save-btn" @click="saveBtn">保存</div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import Form from "@/components/Form/index.vue";
const data = reactive({
  formData: [
    {
      required: true, //是否必填
      label: "称呼", //label文案
      type: "input", //类型
      labelWidth: "",
      placeholder: "客户称呼",
      name: "name",
    },
    {
      required: true,
      label: "手机",
      type: "input",
      labelWidth: "",
      placeholder: "手机号码",
      name: "phone",
    },
    {
      required: true,
      label: "所在地区",
      type: "cascader",
      labelWidth: "",
      placeholder: "地区信息",
      name: "area",
    },
    {
      required: true,
      label: "详细地址",
      type: "input",
      labelWidth: "",
      placeholder: "街道门牌信息",
      name: "address",
    },
    {
      required: true,
      label: "客户分类",
      type: "radio",
      labelWidth: "",
      placeholder: "",
      radioInfo: [
        {
          name: '1',
          value: "外部客户",
        },
        {
          name: '2',
          value: "内部员工",
        },
      ],
      name: "classify",
    },
    {
      required: false,
      label: "客户标签",
      type: "link",
      labelWidth: "",
      placeholder: "添加标签",
      name: "tag",
    },
  ],
});
const params = reactive({
  name: "",
  phone: "",
  area: "",
  address: "",
  classify: "",
  tag: "这个先不写了，要新页面 然后回调回来。我晚点再写这个新页面",
});

const saveBtn = ()=>{
  console.log(params)
}
</script>

<style lang="less" scoped>
.fixed-bottom {
  position: fixed;
  width: 100%;
  bottom: 34px;
  left: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  .save-btn {
    width: 100%;
    height: 40px;
    background: #046eff;
    border-radius: 2px;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
  }
}
</style>